<template>
  <div id="play">
    <div class="bgc">
      <img
        src="http://p2.music.126.net/e5cvcdgeosDKTDrkTfZXnQ==/109951166155165682.jpg?imageView&thumbnail=360y360&quality=75&tostatic=0"
        alt=""
      />
    </div>
    <div class="top">
      <div class="title">
        <div class="text">
          <img
            src="http://p2.music.126.net/e5cvcdgeosDKTDrkTfZXnQ==/109951166155165682.jpg?imageView&thumbnail=360y360&quality=75&tostatic=0"
            alt=""
          />
          <span>你知道这首歌居然被这么评论</span>
        </div>
        <button>
          打开看看<span
            class="iconfont icon-arrow-left"
            style="font-size: 3px"
          ></span>
        </button>
      </div>
    </div>
    <div class="pic" @click="startPlay">
      <p :class="{ isPlay }">
        <img
          src="//s3.music.126.net/mobile-new/img/disc.png?d3bdd10…="
          alt=""
        />
        <img :src="bgcUrl" alt="" />
      </p>

      <span v-show="!isPlay" class="iconfont icon-bofang"></span>
    </div>

    <div class="pic1">
      <img
        src="//s3.music.126.net/mobile-new/img/needle-ab.png?4b81da043356110081e5ccaed2e6f2ad="
      />
    </div>
    <div class="song">
      <!-- 歌名 -->
      <p>
        {{ songName }}<span v-show="songName1">{{ songName1 }}</span>
      </p>
      <!-- 歌词 -->
      <div class="lyric">
        <ul :style="lyric">
          <template v-for="(item, index) in lrc">
            <li :key="index" >
              <span> {{ item }}</span>
            </li>
          </template>
        </ul>
      </div>
    </div>

    <div>
      <audio ref="audio" :src="url"></audio>
    </div>
  </div>
</template>

<script>
export default {
  data: () => {
    return {
      bgcUrl: "",
      url: "",
      songName: "",
      songName1: "",
      isPlay: false,
      lrc: [],
      timer: "",
      nowIndex: 0,
      time: "",
      lyric: {
        transform: "translateY(0)",
        transition: " all 0.3s",
      },
    };
  },
  methods: {
    startPlay() {
      this.isPlay = !this.isPlay;
      if (this.isPlay) {
        this.$refs.audio.play();
        this.time = setInterval(() => {
          this.timer = parseInt(this.$refs.audio.currentTime);
        }, 50);
      } else {
        clearInterval(this.time);
        this.$refs.audio.pause();
      }
    },
  },
  async mounted() {
    let res = await this._axios.get(`/song/url?id=${this.$route.params.id}`);
    let res1 = await this._axios.get(`/lyric?id=${this.$route.params.id}`);
    let res2 = await this._axios.get(
      `/song/detail?ids=${this.$route.params.id}`
    );
    console.log(res);
    console.log(res1);
    console.log(res2);
    this.url = res.data.data[0].url;

    let lyricArr = res1.data.lrc.lyric.split("[").slice(1);
    let lrcObj = {};
    lyricArr.forEach((item) => {
      let arr = item.split("]");
      let m = parseInt(arr[0].split(":")[0]);
      let s = parseInt(arr[0].split(":")[1]);
      arr[0] = m * 60 + s;
      if (arr[1] != "\n") {
        // 去除歌词中的换行符
        lrcObj[arr[0]] = arr[1];
      }
      this.lrc = lrcObj;
    });

    console.log(this.lrc);

    this.bgcUrl = res2.data.songs[0].al.picUrl;
    this.songName = res2.data.songs[0].al.name;
    this.songName1 = res2.data.songs[0].alia[0];
  },
  watch: {
    timer() {
      for (let index in this.lrc) {
        if (this.timer == index) {
          this.lyric.transform = `translateY(-${this.nowIndex++}00%)`;
        }
      }
    },
  },
};
</script>

<style lang="scss" scoped>
#play {
  .bgc {
    width: _vw(750);
    height: _vw(1330);
    background-color: rgba(0, 0, 0, 0.5);
    position: absolute;
    z-index: 0;
    img {
      width: 100%;
      height: 100%;
      filter: blur(40px);
    }
  }
  .top {
    margin: 0 auto;
    position: relative;
    z-index: 55;
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: _vw(95);
    width: _vw(700);
    border-bottom: 1px solid #f6f6f6;
    .title {
      width: 100%;
      display: flex;
      align-items: center;
      justify-content: space-between;
      .text {
        display: flex;
        align-items: center;
        span {
          color: #fff;
        }
        img {
          width: _vw(55);
          height: _vw(55);
          border-radius: 50%;
        }
      }
      button {
        width: _vw(160);
        height: _vw(50);
        border-radius: 25px;
        background-color: #293133;
        border: 1px solid #fff;
        color: #fff;
        text-align: center;
        line-height: _vw(50);
      }
    }
  }

  .pic {
    top: _vw(137);
    display: flex;
    align-items: center;
    justify-content: center;
    width: _vw(500);
    height: _vw(500);
    margin: 0 auto;
    background-color: #f6f6f6;
    background-color: rgba(177, 165, 165, 0.2);
    position: absolute;
    right: 17%;
    // transform: translateX(50%) rotate(36deg);
    border-radius: 50%;
    p {
      &.isPlay {
        animation: audio 8s linear infinite;
      }
      @keyframes audio {
        0% {
          transform: rotate(0);
        }
        100% {
          transform: rotate(360deg);
        }
      }
      display: flex;
      align-items: center;
      justify-content: center;
      img {
        &:first-of-type {
          width: _vw(500);
          height: _vw(500);
        }
        &:last-of-type {
          width: _vw(310);
          height: _vw(310);
          border-radius: 50%;
          position: absolute;
        }
      }
    }

    span {
      font-size: _vw(110);
      position: absolute;
      color: #fff;
      z-index: 55;
    }
  }
  .pic1 {
    position: absolute;
    top: _vw(50);
    right: _vw(200);
    img {
      width: _vw(160);
      height: _vw(220);
    }
  }
  .song {
    width: _vw(580);
    margin: 0 auto;
    position: relative;
    top: _vw(600);
    text-align: center;
    p {
      color: #fff;
      font-size: _vw(37);
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }
    .lyric {
      margin-top: _vw(20);
      overflow: hidden;
      width: 100%;
      text-align: center;
      height: _vw(75);
      ul {
        height:100%;
        width: 100%;
        li {
          display: inline-block;
          height: 100%;
        width: 100%;
          color: #fff;
        }
      }
    }
  }
}
</style>